<template>
  <view>
    <uni-nav-bar :fixed="true" background-color="#fff" color='#000' status-bar left-icon="left" title="校园风光"
      :border="false" @clickLeft='back' />
    <view class="nav-box">
      <view class="image" @click="preview(0)">
        <image :src="item.imageUrl"></image>
      </view>
      <view class="nav-title">
        {{item.description}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        item: {}
      };
    },
    onLoad(options) {
      this.item = JSON.parse(options.item)
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      preview(i) {
        uni.previewImage({
          current: i,
          urls: [this.item.imageUrl]
        })
      },
    }
  }
</script>

<style lang="scss">
  .nav-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85%;
    height: 480rpx;
    padding: 30rpx;
    margin: 60rpx auto;
    background-color: #fff;

    .image {
      width: 100%;
      height: 400rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .nav-title {
      margin-top: 30rpx;
      text-align: center;
    }
  }
</style>